<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>任务一：零基础HTML编码</title>
  </head>
  <body>
    <h1>网站一级标题</h1>
    <ul>
      <li><a href="#article1">导航链接1</a></li>
      <li><a href="#article2">导航链接2</a></li>
      <li><a href="#article3">导航链接3</a></li>
      <li><a href="#article4">导航链接4</a></li>
    </ul>
    <h2 id="article1">文章一级标题</h2>
    <h3>文章二级标题</h3>
    <p>文章作者 文章发表时间</p>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
    <img src="keyboard.jpg" alt="Keyboard">
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>

    <h2 id="article2">另一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <p>文章作者 文章发表时间</p>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
    <img src="keyboard.jpg" alt="Keyboard">
    <ul>
      <li>列表项目一</li>
      <li>列表项目二</li>
      <li>列表项目三</li>
    </ul>

    <h2 id="article3">图片</h2>
    <ul style="list-style:none">
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
      <li>好看的图片<br /><img src="keyboard.jpg" alt="Keyboard"></li>
    </ul>

    <h2 id="article4">最后一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <p>文章作者 文章发表时间</p>
    <ol>
      <li>排名1</li>
      <li>排名2</li>
      <li>排名3</li>
    </ol>
    <p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
    <table border="1">
      <tr>
        <td>表头</td>
        <td>表头</td>
        <td>表头</td>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td>操作</td>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td>操作</td>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td>操作</td>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td>操作</td>
      </tr>
      <tr>
        <td>总计</td>
        <td colspan="2">1000</td>
      </tr>
    </table>
    <div>
      <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
      <h3>侧栏注册窗口标题</h3>
      <p>请输入邮箱地址：<input type="email" placeholder="这是一个输入文本框"></p>
      <p>邮箱地址请按要求格式输入</p>
      <p>请输入密码：<input type="text" placeholder="这是一个输入文本框"> 请重复输入密码：<input type="text" placeholder="这是一个输入文本框"></p>
      <p>密码请为6-16位英文数字</p>
    </div>
    <div>
      <form action="ife-wei-01.html" method="get">
        性别：<input type="radio" name="sex" id="male"><label for="male">男</label><input type="radio" name="sex" id="female"><label for="female">女</label>
        城市：<select name="city" id="city">
          <option value="beijing" selected>北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
        </select>
        爱好：<input type="checkbox" name="hobby" id="sport"><label for="sport">运动</label><input type="checkbox" name="hobby" id="art"><label for="art">艺术</label><input type="checkbox" name="hobby" id="science"><label for="science">科学</label>
        个人描述：<textarea name="description" id="description" cols="30" rows="2" placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
        <input type="submit" value="确认提交">
      </form>
    </div>
    <footer>版权所有©</footer>
  </body>
</html>
